<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'

const studentData = ref([])

// axios.get('http://localhost:8080/category').then(res=>{
//     categoryData.value = res.data
//     console.log(categoryData.value)
// })
import { getStudentPageService,addStudentService,updateStudentService,deleteStudentService } from '@/api/student.js'

const router = useRouter();


//声明一个异步的函数
const studentList =  async () => {
    try {
        let res = await getStudentPageService();
        studentData.value = res.data
        console.log(res)
    } catch (error) {
        console.log(error)
    }

}
studentList()

const dialogVisible = ref(false)

const studentModel = ref({
    realname: '',
    eno:'',
    pwd:'',
    sex:'',
    age:''
})



import { ElMessage } from 'element-plus'

const addStudent = async() => {
    let res = await addStudentService(studentModel.value);
    ElMessage.success(res.message ? res.message : '添加成功')
    dialogVisible.value = false
    await studentList()

}


//定义变量，控制标题的展示
const title = ref('')

//显示编辑弹窗
const showDialog = (row) => {
    dialogVisible.value = true;
    title.value = '学生编辑';
    //数据拷贝
    studentModel.value.realname = row.realname;
    studentModel.value.eno = row.eno;
    studentModel.value.pwd = row.pwd;
    studentModel.value.sex = row.sex;
    studentModel.value.age = row.age;
    studentModel.value.id = row.id
}


//编辑分类
const updateStudent = async () => {
    //调用接口
    let res = await updateStudentService(studentModel.value);
    console.log(res.data)
    ElMessage.success(res.message ? res.message : '修改成功');
    studentList()
    dialogVisible.value = false
}


//清空模型的数据
const clearData = () => {
    studentModel.value.realname = '';
    studentModel.value.eno = '';
    studentModel.value.pwd = '';
    studentModel.value.sex = '';
    studentModel.value.age = '';
}

import { ElMessageBox } from 'element-plus'
import {useRouter} from "vue-router";

//删除分类
const deleteStudent = (row) => {
    //提示用户 是否删除
    ElMessageBox.confirm(
        '你确认要删除该博客信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async() => {
            //调用接口
            let res = await deleteStudentService(row.id);
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            //刷新列表
            studentList()

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


</script>

<template>
    <div class="page-container">
        <div class="header">
            <h1>学生列表</h1>
            <div class="extra">
                <button @click="dialogVisible = true; title='添加学生'; clearData()">添加学生</button>
            </div>
        </div>

        <table>
            <tr>
                <th>学生编号</th>
                <th>学生姓名</th>
                <th>账号</th>
                <th>密码</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in studentData" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.realname}}</td>
                <td>{{item.eno}}</td>
                <td>{{item.pwd}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button @click="showDialog(item)">修改</button>
                    <button @click="deleteStudent(item)">删除</button>
                </td>
            </tr>
        </table>

        <!-- 添加分类弹窗 -->
        <div v-if="dialogVisible" class="dialog-overlay">
            <div class="dialog-content">
                <div class="dialog-header">
                    <span>{{title}}</span>
                    <button class="close-btn" @click="dialogVisible = false">×</button>
                </div>

                <form class="dialog-form">
                    <div class="form-item">
                        <label>学生姓名：</label>
                        <input type="text" v-model="studentModel.realname" maxlength="10">
                    </div>
                    <div class="form-item">
                        <label>账号：</label>
                        <input type="text" v-model="studentModel.eno" maxlength="10">
                    </div>
                    <div class="form-item">
                        <label>密码：</label>
                        <input type="text" v-model="studentModel.pwd" maxlength="10">
                    </div>
                    <div class="form-item">
                        <label>性别：</label>
                        <input type="text" v-model="studentModel.sex" maxlength="10">
                    </div>
                    <div class="form-item">
                        <label>年龄：</label>
                        <input type="text" v-model="studentModel.age" maxlength="10">
                    </div>
                </form>

                <div class="dialog-footer">
                    <button class="cancel-btn" @click="dialogVisible = false">取 消</button>
                    <button class="confirm-btn" @click="title=='添加学生' ? addStudent():updateStudent()">确 定</button>
                </div>
            </div>
        </div>

    </div>
</template>


<style scoped>

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-content {
    background: white;
    width: 30%;
    border-radius: 4px;
    padding: 20px;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}


.dialog-footer {
    text-align: right;
}

</style>